<template>
  <div id="bc">
    <el-form class="login-container">
      <h1 class="title">登录</h1>
      <el-form-item>
        <el-input
          type="text"
          placeholder="电话号"
          v-model="phone"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="password"
          placeholder="密码"
          v-model="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <div class="form-row">
          <div class="form-col-60">
            <el-form-item>
              <div class="wei-input">
                <icon type="waiting" color="#E8741E" size="16"></icon>
                <el-input
                  class="input"
                  autofocus
                  placeholder="请输入验证码"
                  @input="updatevertify"
                  v-model="captchaCode"
                ></el-input>
              </div>
            </el-form-item>
          </div>
          <div class="form-col-40">
            <el-form-item>
              <div class="wei-input">
                <el-image
                  style="width: 200rpx; height: 85rpx"
                  @click="getVertify1"
                  :src="imgData"
                ></el-image>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="doLogin" style="width: 100%"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getVertify, Login } from "../utils/api/login";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data: function () {
    return {
      phone: "",
      password: "",
      msg: "",
      captchaCode: "",
      imgData: "",
    };
  },
  methods: {
    doLogin: function () {
      Login(this.phone, this.password, this.captchaCode).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$router.push({
            path: "/deliver",
          });
          localStorage.setItem("m_id", res.data.data.manager.manager_id);
          localStorage.setItem("m_phone", res.data.data.manager.m_phone);
          localStorage.setItem("token", res.data.data.token);
        } else if (res.data.code == 500) {
          this.$message({
            message: "验证码或密码错误，请重新输入",
            type: "warning",
          });
        } else {
          this.$message({
            message: "网络波动，请稍后",
            type: "warning",
          });
        }
      });
    },
    getVertify1() {
      getVertify().then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.imgData = res.data.data;

          // console.log(this.imgData);
          // res["Set-Cookie"] = "13231231231";
          // res["Access-Control-Expose-Headers"] = "Set-Cookie";
          // console.log(Object.keys(res.headers["set-cookie"]));
          // console.log(res.headers["Set-Cookie"]);
          // if (res && res.headers && res.headers["Set-Cookie"]) {
          //   localStorage.setItem("cookieKey", res.headers["Set-Cookie"]);
          //   console.log(localStorage.getItem("cookieKey"));
          //   //保存Cookie到localStorage console.log(localStorage.getItem('cookieKey'));
          // }
        }
      });
    },
  },
  created() {
    this.getVertify1();
  },
};
</script>

<style>
html,
body {
  height: 100%;
  margin: 0; /* 移除默认的边距 */
  padding: 0; /* 移除默认的内边距 */
}

#bc {
  /* 移除url背景图片 */
  /* background: url("@/assets/data/5.jpg"); */

  /* 使用线性渐变从蓝色到绿色 */
  background: linear-gradient(
    to bottom,
    rgb(227, 227, 233),
    rgb(212, 246, 212)
  );

  width: 100%;
  height: 100%;
  /* 保持宽高不变 */

  /* 由于现在使用渐变，可以移除background-size属性 */
  /* background-size: 100% 100%; */
}
.login-container {
  border-radius: 10px;
  top: 150px;
  position: relative;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(203, 185, 185, 0.1);
  margin: 0 auto; /* 居中 */
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.form-row {
  display: flex;
  left: -20px;
}

.form-col-60 {
  flex: 0 0 60%;
  padding: 0 10px;
}

.form-col-40 {
  flex: 0 0 40%;
  padding: 0 10px;
}
</style>
